<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>watch例子</title>
</head>
<body>
<div id="app">
    <div>
        性别：
        <input type="radio" v-model="sex" value="1">男
        <input type="radio" v-model="sex" value="2">女
        <input type="text" v-model="obj.text">
    </div>
    <div>
        爱好：
        <li v-for="item in hobby">{{item}}</li>
    </div>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                sex: '',
                obj:{
                  text:''
                },
                hobby: [],
                girHobby: ['逛街', '看电影'],
                boyHobby: ['打游戏', '干饭']
            }
        },
        watch: {
            //监听谁，方法名就是谁，这里监听sex
            sex: function (newValue) {
                //根据newValue做判断，然后给hobby赋值
                if (newValue == 1) {
                    //当性别是男，那么久将boyHobby赋值给hobby
                    this.hobby = this.boyHobby;
                } else if (newValue == 2) {
                    //当性别是女，那么久将girHobby赋值给hobby
                    this.hobby = this.girHobby;
                }

            },
            'obj.text':function (val) {
                console.log(val);
            }

        }
    })
</script>
</body>
</html>